<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<meta http-equiv="window-target" content="_top">
<meta name="description" content="UIGG is a front-end bracket for designers">
<meta name="author" content="mixice.com">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<title>UIGG Document</title>

<link rel="shortcut icon" href="../images/ico.svg">
<link rel="stylesheet" href="../styles/uigg.css">
<link rel="stylesheet" href="demo.css">

<script src="../js/jquery.min.js"></script>
<script src="../js/uigg.js"></script>
<script src="demo.js"></script>
</head>

<body>
<!-- <load></load> -->
<style>
    .cont iframe {width: 100%;border: 1px var(--eee) solid;margin: 5px 0;}
    .cont xmp {color: var(--tomato);white-space: pre-wrap;word-break: break-all;cursor: pointer;background-color: var(--f7);padding: 0 20px 20px;margin: 5px 0;}
    .cont h3 {padding: 20px 0;margin-bottom: 10px;border-bottom-width: 1px;}
    .cont h5 {padding: 10px 0;}
    .cont p {padding: 10px 0;}
    .cont p a,
    .cont p span {color: var(--sapphire);background-color: var(--f7);padding: 5px 10px;border-radius: 2px;margin: 0 5px;}
    .cont p span.warning {background-color: var(--red);color: white;}
    .cont p a:hover {background-color: var(--sapphire);color: white;}
    .cont .btn {width: 200px;margin: 10px 0;font-weight: bold;}
    .cont table th,
    .cont table td {padding: 0;}
    .cont table xmp {padding: 0;line-height: 50px;}

    @media(max-width:640px){
        .cont iframe {margin: .1rem 0;}
        .cont xmp {padding: 0 .2rem .25rem;margin: .1rem 0;border-radius: .1rem;}
        .cont h3 {padding: .1rem 0;}
        .cont h5,
        .cont p {padding: .1rem 0;}
        .cont p a,
        .cont p span {padding: .05rem .1rem;margin: 0 .05rem;}
        .cont .btn {width:2.5rem;border-radius: .05rem;margin: .1rem 0;}
        .cont table xmp {line-height: .7rem;}
    }
</style>

<!----------------------------------------------------------------------------------------->

<section class="subject">
    <section class="sider">
        <x class="ico ico-menu"></x>
        <a class="logo" href="/"><em><img src="../images/ico.svg"></em><span>uigg</span></a>
        <fold show>
            <fold-group>
                <fold-title><i class="ico ico-uigg"></i><h5>using UIGG</h5><u></u></fold-title>
                <fold-cont>
                    <a class="smooth" href="#get">get UIGG</a>
                    <a class="smooth" href="#responsive">responsive rule</a>
                    <a class="smooth" href="#preset">layout preset</a>
                </fold-cont>
            </fold-group>
            <fold-group>
                <fold-title><i class="ico ico-graphic"></i><h5>preset function</h5><u></u></fold-title>
                <fold-cont>
                    <a class="smooth" href="#alert">alert</a>
                    <a class="smooth" href="#alone">alone</a>
                    <a class="smooth" href="#anime">anime</a>
                    <a class="smooth" href="#audio">audio</a>
                    <a class="smooth" href="#button">button</a>
                    <a class="smooth" href="#clue">clue</a>
                    <a class="smooth" href="#cookie">cookie</a>
                    <a class="smooth" href="#copy">copy</a>
                    <a class="smooth" href="#countdown">countdown</a>
                    <a class="smooth" href="#crumb">crumb</a>
                    <a class="smooth" href="#disable">disable</a>
                    <a class="smooth" href="#drop">drop</a>
                    <a class="smooth" href="#empty">empty</a>
                    <a class="smooth" href="#fold">fold</a>
                    <a class="smooth" href="#font">font</a>
                    <a class="smooth" href="#form">form</a>
                    <a class="smooth" href="#fullscreen">fullscreen</a>
                    <a class="smooth" href="#hop">hop</a>
                    <a class="smooth" href="#horn">horn</a>
                    <a class="smooth" href="#language">language</a>
                    <a class="smooth" href="#menu">menu</a>
                    <a class="smooth" href="#mix">mix</a>
                    <a class="smooth" href="#notice">notice</a>
                    <a class="smooth" href="#notify">notify</a>
                    <a class="smooth" href="#page">page</a>
                    <a class="smooth" href="#pop">pop</a>
                    <a class="smooth" href="#random">random</a>
                    <a class="smooth" href="#rate">rate</a>
                    <a class="smooth" href="#recording">recording</a>
                    <a class="smooth" href="#reminder">reminder</a>
                    <a class="smooth" href="#scaler">scaler</a>
                    <a class="smooth" href="#smooth">smooth</a>
                    <a class="smooth" href="#step">step</a>
                    <a class="smooth" href="#tab">tab</a>
                    <a class="smooth" href="#table">table</a>
                    <a class="smooth" href="#tip">tip</a>
                    <a class="smooth" href="#title">title</a>
                    <a class="smooth" href="#toggle">toggle</a>
                    <a class="smooth" href="#top">top</a>
                    <a class="smooth" href="#touch">touch</a>
                </fold-cont>
            </fold-group>
            <fold-group>
                <fold-title><i class="ico ico-phone-ios"></i><h5>mobile terminal</h5><u></u></fold-title>
                <fold-cont>
                    <a class="smooth" href="#name">name</a>
                    <a class="smooth" href="#nav">nav</a>
                    <a class="smooth" href="#music">music</a>
                </fold-cont>
            </fold-group>
            <fold-group>
                <fold-title><i class="ico ico-usb"></i><h5>internal</h5><u></u></fold-title>
                <fold-cont>
                    <a class="smooth" href="#admin">admin</a>
                    <a class="smooth" href="#chat">chat</a>
                </fold-cont>
            </fold-group>
            <fold-group>
                <fold-title><i class="ico ico-response"></i><h5>external</h5><u></u></fold-title>
                <fold-cont>
                    <a class="smooth" href="#swiper">swiper</a>
                    <a class="smooth" href="#editor">editor</a>
                </fold-cont>
            </fold-group>
            <fold-group>
                <fold-title><i class="ico ico-app"></i><h5>general library</h5><u></u></fold-title>
                <fold-cont>
                    <a class="smooth" href="#color">color</a>
                    <a class="smooth" href="#ico">ico</a>
                    <a class="smooth" href="#attribute">attribute</a>
                    <a class="smooth" href="#label">label</a>
                    <a class="smooth" href="#lib">lib</a>
                </fold-cont>
            </fold-group>
        </fold>
    </section>
    <section class="contant">
        <h2><i class="ico ico-uigg"></i>Using UIGG</h2>
        <div class="cont" id="get">
            <h3>get UIGG</h3>
            <h5>download zip</h5>
            <p>You can download UIGG from the official website</p>
            <a class="btn shadow" href="//ui.gg/uigg.zip" target="_blank">download</a>
            <h5>download design template</h5>
            <p>We have prepared the design specification of rapid prototyping for designers</p>
            <a class="btn shadow" href="//ui.gg/xd.zip" target="_blank">Adobe XD</a>
            <a class="btn shadow" href="//www.figma.com/@mixice" target="_blank">figma</a>
            <h5>get gitHub</h5>
            <p>You can get UIGG from gitHub (Click the code block to copy it)</p>
<xmp>
//github.com/mixice/uigg.git
</xmp>
            <a class="btn shadow" href="//github.com/mixice/uigg" target="_blank">gitHub</a>
            <h5>get npm</h5>
            <p>You can get UIGG from npm</p>
<xmp>
npm i uigg
</xmp>
            <p>Add style module</p>
<xmp>
import 'uigg/uigg.css'
</xmp>
            <p>Add javascript module</p>
<xmp>
import 'uigg'
</xmp>
            <h5>quote</h5>
            <p>You also refer to files directly from the web</p>
<xmp>
<link rel="stylesheet" href="//ui.gg/lib/uigg.css">
<script src="//ui.gg/lib/uigg.js"></script>
</xmp>
            <p>CDN</p>
<xmp>
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/uigg/uigg.min.css">
<script src="//cdn.jsdelivr.net/npm/uigg"></script>
</xmp>
            <h5>unpkg</h5>
            <p>You can use unpkg</p>
<xmp>
https://unpkg.com/uigg
</xmp>
        </div>
        <div class="cont" id="responsive">
            <h3>responsive rule</h3>
            <h5>PC rule</h5>
            <p><span>.main</span> defines the center of the content area, the maximum width is <span>1300px</span> , add the class to the DOM</p>
<xmp>
class="main"
</xmp>
            <h5>mobile rule</h5>
            <p><span>.mobile</span> defines the center of the content area, the maximum width is <span>640px</span> , add the class to the DOM</p>
<xmp>
class="mobile"
</xmp>
            <h5>mobile mode</h5>
            <p>If you need to force the mobile mode, add the javascript to the DOM</p>
<xmp>
mobile(true)
</xmp>
            <h5>unit conversion</h5>
            <p>UIGG uses <span>rem</span> as the response unit, and the calculation rule is <span>100px = 1rem</span></p>


        </div>
        <div class="cont" id="preset">
            <h3>layout preset</h3>
            <h5>basic</h5>
            <p>Add the class to the DOM</p>
<xmp>
class="block"
class="cover"
class="contain"
class="center"
class="clear"
class="hide"
class="show"
class="hide-important"
class="show-important"
class="single"
class="only-web"
class="only-mob"
class="float-left"
class="float-right"
class="float-left-important"
class="float-right-important"
class="flex"
class="flex-auto"
class="flex-column"
class="full"
class="full-device"
class="transparent"
class="transition"
</xmp>
            <h5>absolute</h5>
            <p>The logic of absolute and fixed positions</p>
            <div class="absolute-logic">
                <a>1</a>
                <a>2</a>
                <a>3</a>
                <a>4</a>
                <a>5</a>
                <a>6</a>
                <a>7</a>
                <a>8</a>
                <a>9</a>
            </div>
            <p>Add the class to the DOM</p>
<xmp>
class="absolute"
class="absolute-1"
class="absolute-2"
class="absolute-3"
class="absolute-4"
class="absolute-5"
class="absolute-6"
class="absolute-7"
class="absolute-8"
class="absolute-9"
class="fixed"
class="fixed-1"
class="fixed-2"
class="fixed-3"
class="fixed-4"
class="fixed-5"
class="fixed-6"
class="fixed-7"
class="fixed-8"
class="fixed-9"
</xmp>
            <h5>wide</h5>
            <p><span>wide</span> can quickly set the width of elements, usually used for <span>form</span></p>
            <div class="wide-logic">
                <a class="wide-10">wide-10</a>
                <a class="wide-20">wide-20</a>
                <a class="wide-30">wide-30</a>
                <a class="wide-40">wide-40</a>
                <a class="wide-50">wide-50</a>
                <a class="wide-60">wide-60</a>
                <a class="wide-70">wide-70</a>
                <a class="wide-80">wide-80</a>
                <a class="wide-90">wide-90</a>
                <a class="wide">wide</a>
            </div>
            <p>Add the class to the DOM</p>
<xmp>
class="wide" /* 100% */
class="wide-10"
class="wide-20"
class="wide-30"
class="wide-40"
class="wide-50"
class="wide-60"
class="wide-70"
class="wide-80"
class="wide-90"
</xmp>
            <h5>load</h5>
            <p>If you need to wait for the page to be displayed after loading, add the code to the DOM</p>
<xmp>
<load></load>
</xmp>
            <h5>corner</h5>
            <p>Add the class to the DOM</p>
<xmp>
class="corner"
</xmp>
            <p>Styles demo</p>
<xmp>
.corner::after {border-width: 0 10px 10px 10px;border-bottom-color: white;top: -10px;}
</xmp>
            <h5>shadow</h5>
            <p>Add the class to the DOM</p>
<xmp>
class="shadow"
</xmp>
            <p>Styles demo</p>
<xmp>
.shadow::after {background-color: white;box-shadow: 0 5px 10px white;}
</xmp>
            <h5>adrift</h5>
            <p>Add the class to the DOM</p>
<xmp>
class="adrift"
</xmp>
            <p>Styles demo</p>
<xmp>
.adrift {filter: drop-shadow(0 10px 10px var(--color));}
</xmp>
            <h5>return</h5>
            <p>Add the class to the DOM</p>
<xmp>
class="return"
</xmp>
        </div>
        <h2><i class="ico ico-graphic"></i>Preset function</h2>
        <div class="cont" id="alert">
            <h3>alert</h3>
            <h5>code</h5>
            <p>Add the javascript to the DOM</p>
<xmp>
alert('alert')
</xmp>
            <p>If you need confirm, run <span>confirm()</span></p>
<xmp>
confirm('confirm')
</xmp>
            <p>If you need prompt, run <span>prompt()</span></p>
<xmp>
prompt('prompt')
</xmp>
            <h5>effect display</h5>
            <iframe src="alert.html" height="400"></iframe>
            <a class="btn shadow" href="alert.html" target="_blank">view</a>
        </div>
        <div class="cont" id="alone">
            <h3>alone</h3>
            <h5>code</h5>
            <p>Add the javascript to the DOM</p>
<xmp>
alone = $('element')
</xmp>
            <p>If you need manipulating character objects, must choose <span>Z</span> in <span>$(document).ready()</span></p>
<xmp>
$(function(){
    $('element z')
})
</xmp>
            <h5>effect display</h5>
            <iframe src="alone.html" height="250"></iframe>
            <a class="btn shadow" href="alone.html" target="_blank">view</a>
        </div>
        <div class="cont" id="anime">
            <h3>anime</h3>
            <h5>code</h5>
            <p>Add the class to the DOM</p>
<xmp>
class="anime-spasm"
class="anime-rotate"

class="anime-beat-x"
class="anime-beat-y"
class="anime-beat-z"
class="anime-beat-r"

class="anime-fade-in"
class="anime-fade-in-down"
class="anime-fade-in-left"
class="anime-fade-in-right"
class="anime-fade-in-up"
class="anime-fade-out"
class="anime-fade-out-down"
class="anime-fade-out-left"
class="anime-fade-out-right"
class="anime-fade-out-up"

class="anime-bounce-in"
class="anime-bounce-in-down"
class="anime-bounce-in-left"
class="anime-bounce-in-right"
class="anime-bounce-in-up"
class="anime-bounce-out"
class="anime-bounce-out-down"
class="anime-bounce-out-left"
class="anime-bounce-out-right"
class="anime-bounce-out-up"

class="anime-flip-in-x"
class="anime-flip-in-y"
class="anime-flip-out-x"
class="anime-flip-out-y"

class="anime-zoom-in"
class="anime-zoom-out"
class="anime-zoom-in-enlarge"
class="anime-zoom-out-enlarge"

class="anime-shrink-in"
class="anime-shrink-out"
class="anime-shrink-in-enlarge"
class="anime-shrink-out-enlarge"
</xmp>
            <p>If you want the some effects, add the class to the DOM</p>
<xmp>
class="infinite"
class="alternate"
class="reverse"
</xmp>
            <h5>effect display</h5>
            <iframe src="anime.html" height="400"></iframe>
            <a class="btn shadow" href="anime.html" target="_blank">view</a>
        </div>
        <div class="cont" id="audio">
            <h3>audio</h3>
            <h5>code</h5>
            <p>Add the class to the DOM</p>
<xmp>
class="audio-error"
class="audio-right"
class="audio-trigger"
class="audio-brilliant"
class="audio-notify"
class="audio-button"
class="audio-aeolian"
class="audio-bounce"
class="audio-boxing"
class="audio-ding"
class="audio-drip"
class="audio-drum"
class="audio-dulcimer"
class="audio-wave"
class="audio-audio"
</xmp>
            <h5>effect display</h5>
            <iframe src="audio.html" height="400"></iframe>
            <a class="btn shadow" href="audio.html" target="_blank">view</a>
        </div>
        <div class="cont" id="button">
            <h3>button</h3>
            <h5>code</h5>
            <p>Add the class to the DOM</p>
<xmp>
class="btn"
</xmp>
            <p>Empty button</p>
<xmp>
class="btn btn-empty"
</xmp>
            <p>Color button, please refer to <a href="#color" target="_blank">color</a></p>
<xmp>
class="btn bg-red"
</xmp>
            <p>Color empty button, please refer to <a href="#color" target="_blank">color</a></p>
<xmp>
class="btn co-red"
</xmp>
            <p>Button disable</p>
<xmp>
<a class="btn" disabled>button</a>
</xmp>
            <p>Button ico</p>
<xmp>
<a class="btn"><i class="ico ico-search"></i><span>button</span></a>
</xmp>
            <p>Button flex group</p>
<xmp>
<div class="btn-flex">
    <a class="btn">button</a>
    <a class="btn">button</a>
</div>
</xmp>
            <h5>effect display</h5>
            <iframe src="button.html" height="550"></iframe>
            <a class="btn shadow" href="button.html" target="_blank">view</a>
        </div>
        <div class="cont" id="clue">
            <h3>clue</h3>
            <h5>code</h5>
            <p>Add the attribute to the DOM, If the element has a <span>title</span>, the value of clue will become the value of title</p>
<xmp>
clue=""
</xmp>
            <p>You can add <span>left</span> or <span>right</span> or <span>bottom</span> to change the position of the clue</p>
            <h5>effect display</h5>
            <iframe src="clue.html" height="300"></iframe>
            <a class="btn shadow" href="clue.html" target="_blank">view</a>
        </div>
        <div class="cont" id="cookie">
            <h3>cookie</h3>
            <h5>code</h5>
            <p>Save cookies, add the javascript to the DOM</p>
<xmp>
setCookie('name','value','time')
</xmp>
            <p>Get cookies, add the javascript to the DOM</p>
<xmp>
getCookie('name')
</xmp>
            <h5>effect display</h5>
            <iframe src="cookie.html" height="300"></iframe>
            <a class="btn shadow" href="cookie.html" target="_blank">view</a>
        </div>
        <div class="cont" id="copy">
            <h3>copy</h3>
            <p><span class="warning">Warning :</span> This function can work normally only after obtaining user clipboard authorization or under the <span>https</span> security domain</p>
            <h5>code</h5>
            <p>Add the attribute to the DOM</p>
<xmp>
copy-val
copy-btn
</xmp>
            <p>If you need more than one, set different values for different groups</p>
<xmp>
copy-val="copy1"
copy-btn="copy1"
</xmp>
            <p>If you need select copy, add the attribute to the DOM</p>
<xmp>
copy-select
</xmp>
            <h5>effect display</h5>
            <iframe src="copy.html" height="300"></iframe>
            <a class="btn shadow" href="copy.html" target="_blank">view</a>
        </div>
        <div class="cont" id="countdown">
            <h3>countdown</h3>
            <h5>code</h5>
            <p>Add the code to the DOM</p>
<xmp>
<countdown>
    <d>00</d>
    <h>00</h>
    <m>00</m>
    <s>00</s>
</countdown>
</xmp>
            <p>Add the javascript to the DOM</p>
<xmp>
countDate = '0000/00/00 00:00:00'
countdown()
</xmp>
            <h5>effect display</h5>
            <iframe src="countdown.html"></iframe>
            <a class="btn shadow" href="countdown.html" target="_blank">view</a>
        </div>
        <div class="cont" id="crumb">
            <h3>crumb</h3>
            <h5>code</h5>
            <p>Add the code to the DOM</p>
<xmp>
<crumb>
    <li><a href="/">home</a></li>
    <li><a href="">layer</a></li>
    <li><a href="">layer</a></li>
</crumb>
</xmp>
            <h5>effect display</h5>
            <iframe src="crumb.html"></iframe>
            <a class="btn shadow" href="crumb.html" target="_blank">view</a>
        </div>
        <div class="cont" id="disable">
            <h3>disable</h3>
            <h5>code</h5>
            <p>If you need to prevent users from viewing your code, add the function to the DOM</p>
<xmp>
disable()
</xmp>
            <a class="btn shadow" href="disable.html" target="_blank">view</a>
        </div>
        <div class="cont" id="drop">
            <h3>drop</h3>
            <h5>code</h5>
            <p>Add the code to the DOM</p>
<xmp>
<drop>
    <drop-list>
        <ul>
            <li><a>drop 1</a></li>
            <li><a>drop 2</a></li>
            <li><a>drop 3</a></li>
        </ul>
    </drop-list>
</drop>
</xmp>
            <p>If you need to add a submenu, just add <span>drop-list</span> to <span>li</span>, you can have unlimited sets of dolls</p>
            <h5>effect display</h5>
            <iframe src="drop.html" height="350"></iframe>
            <a class="btn shadow" href="drop.html" target="_blank">view</a>
        </div>
        <div class="cont" id="empty">
            <h3>empty</h3>
            <h5>code</h5>
            <p>Add the code to the DOM</p>
<xmp>
<empty></empty>
</xmp>
            <p>You can also customize the content, add the code to the DOM</p>
<xmp>
<empty><i class="ico ico-emot-smile"></i><h3>text</h3></empty>
</xmp>
            <p>If vertical arrangement is required, add DOM around the content</p>
<xmp>
<empty><div><i class="ico ico-emot-smile"></i><h3>text</h3></div></empty>
</xmp>
            <h5>effect display</h5>
            <iframe src="empty.html" height="500"></iframe>
            <a class="btn shadow" href="empty.html" target="_blank">view</a>
        </div>
        <div class="cont" id="fold">
            <h3>fold</h3>
            <h5>code</h5>
            <p>Add the code to the DOM</p>
<xmp>
<fold>
    <fold-group>
        <fold-title><h5>title</h5><u></u></fold-title>
        <fold-cont>article</fold-cont>
    </fold-group>
</fold>
</xmp>
            <p>If you need to expand all by default, you only need to add the <span>show</span> attribute to the <span>fold</span></p>
<xmp>
show
</xmp>
            <h5>effect display</h5>
            <iframe src="fold.html" height="300"></iframe>
            <a class="btn shadow" href="fold.html" target="_blank">view</a>
        </div>
        <div class="cont" id="font">
            <h3>font</h3>
            <h5>web font</h5>
            <p>Add the class to the DOM</p>
<xmp>
class="font-aclonica"
class="font-aller"
class="font-amaranth"
class="font-avenir"
class="font-clarendon"
class="font-din"
class="font-encode"
class="font-geo"
class="font-gotham"
class="font-lat"
class="font-montserrat"
class="font-moto"
class="font-museo"
class="font-neo"
class="font-overpass"
class="font-philosopher"
class="font-portada"
class="font-raleway"
class="font-read"
class="font-renault"
class="font-roboto"
class="font-santander"
class="font-steel"
class="font-tanseek"
class="font-ubuntu"
</xmp>
            <p>Set <span>font-family</span> in CSS, because UIGG uses UIGG fonts by default, you maybe need <span>!important</span></p>
<xmp>
font-family: 'aclonica'
font-family: 'aller'
font-family: 'amaranth'
font-family: 'avenir'
font-family: 'clarendon'
font-family: 'din'
font-family: 'encode'
font-family: 'geo'
font-family: 'gotham'
font-family: 'lat'
font-family: 'montserrat'
font-family: 'moto'
font-family: 'museo'
font-family: 'neo'
font-family: 'overpass'
font-family: 'philosopher'
font-family: 'portada'
font-family: 'raleway'
font-family: 'read'
font-family: 'renault'
font-family: 'roboto'
font-family: 'santander'
font-family: 'steel'
font-family: 'tanseek'
font-family: 'ubuntu'
</xmp>
            <p>Webfont is an independent element, you can introduce it directly into your styles</p>
<xmp>
@import url('//ui.gg/lib/font/font.css');
</xmp>
            <p>CDN</p>
<xmp>
@import url('//cdn.jsdelivr.net/npm/uigg/font/font.min.css');
</xmp>
            <h5>local font</h5>
            <p>Add the class to the DOM (Local font is only valid on the computer side)</p>
<xmp>
class="font-uigg"
class="font-yahei"
class="font-jhenghei"
class="font-nsimsun"
class="font-kaiti"
class="font-lisu"
class="font-youyuan"
class="font-fangsong"
class="font-xingkai"
class="font-xinwei"
class="font-arial"
class="font-tahoma"
</xmp>
            <h5>effect display</h5>
            <iframe src="font.html" height="630"></iframe>
            <a class="btn shadow" href="font.html" target="_blank">view</a>
        </div>
        <div class="cont" id="form">
            <h3>form</h3>
            <h5>filter</h5>
            <p>Add the code to the DOM</p>
<xmp>
<section class="form filter">
    <form>
        <li><span>name</span><input type="text"></li>
        <li><span>time</span><input type="date"></li>
        <li><span>select</span><div class="select"><select><option selected disabled>select</option><option>select</option></select></div></li>
        <li><a class="btn">search</a></li>
    </form>
</section>
</xmp>
            <h5>form</h5>
            <p>Add the code to the DOM</p>
<xmp>
<section class="form">
    <form>
        <li><span>account</span>
            <input class="wide-20" type="text" required>
            <cite>Lorem ipsum dolor sit amet</cite>
        </li>
        <li><span>password</span>
            <div class="input wide-20"><input type="password" required><o class="password"></o></div>
            <cite class="co-red">Password error</cite>
        </li>
        <li><span>scaler</span>
            <scaler><input step="1" min="0" max="100" value="1"></scaler>
            <cite>Lorem ipsum dolor sit amet</cite>
        </li>
        <li><span>radio</span>
            <div class="parent">
                <o class="radio"></o><span>radio</span>
                <o class="radio"></o><span>radio</span>
                <o class="radio"></o><span>radio</span>
            </div>
            <cite>Lorem ipsum dolor sit amet</cite>
        </li>
        <li><span>checkbox</span>
            <div class="parent">
                <o class="checkbox"></o><span>checkbox</span>
                <o class="checkbox"></o><span>checkbox</span>
                <o class="checkbox checkbox-all"></o><span>checkbox all</span>
            </div>
            <cite>Lorem ipsum dolor sit amet</cite>
        </li>
        <li><span>toggle</span>
            <o class="toggle"></o>
            <cite>Lorem ipsum dolor sit amet</cite>
        </li>
        <li><span>progress</span>
            <progress class="wide-20" max="100" value="50"></progress>
        </li>
        <li><span>range</span>
            <input class="wide-20" type="range" min="0" max="100" step="0" value="50">
            <cite>Lorem ipsum dolor sit amet</cite>
        </li>
        <li><span>file</span>
            <input class="wide-30" type="file">
            <cite>Lorem ipsum dolor sit amet</cite>
        </li>
        <li><span>color</span>
            <input type="color">
            <cite>Lorem ipsum dolor sit amet</cite>
        </li>
        <li><span>date</span>
            <input class="wide-20" type="date">
            <cite>Lorem ipsum dolor sit amet</cite>
        </li>
        <li><span>datetime</span>
            <input class="wide-20" type="datetime-local">
            <cite>Lorem ipsum dolor sit amet</cite>
        </li>
        <li><span>month</span>
            <input class="wide-20" type="month">
            <cite>Lorem ipsum dolor sit amet</cite>
        </li>
        <li><span>week</span>
            <input class="wide-20" type="week">
            <cite>Lorem ipsum dolor sit amet</cite>
        </li>
        <li><span>time</span>
            <input class="wide-20" type="time">
            <cite>Lorem ipsum dolor sit amet</cite>
        </li>
        <li><span>select</span>
            <div class="select wide-20"><select><option selected disabled>select</option><option>select</option></select></div>
            <cite>Lorem ipsum dolor sit amet</cite>
        </li>
        <li><span>choice</span>
            <choice class="wide-20">
                <a>choice 1</a>
                <choice-list>
                    <a>choice 1</a>
                    <a>choice 2</a>
                </choice-list>
            </choice>
            <cite>Lorem ipsum dolor sit amet</cite>
        </li>
        <li><span>robot</span>
            <input class="wide-10" type="text">
            <a class="code" uigg="color"><img uigg="color"></a>
            <cite>Lorem ipsum dolor sit amet</cite>
        </li>
        <li><span>code</span>
            <input class="wide-10" type="text">
            <a class="btn code">get code</a>
            <cite>Lorem ipsum dolor sit amet</cite>
        </li>
        <li><span>message</span>
            <textarea class="wide"></textarea>
        </li>
        <li><span>editor</span>
            <div class="editor-simple"></div>
        </li>
        <li><span>images</span>
            <div class="upload">
                <div class="ico upload-group"><input type="file" accept=".jpg,.jpeg,.png,.webp,.gif"><horn class="ico"></horn></div>
                <div class="ico upload-add"></div>
            </div>
            <cite>Lorem ipsum dolor sit amet</cite>
        </li>
        <li class="resolve"><o class="checkbox"></o><span>I've read and agreed</span><a>"User agreement"</a></li>
        <li class="resolve"><button class="btn btn-submit">cancel</button><button class="btn btn-submit">submit</button></li>
    </form>
</section>
</xmp>
            <h5>effect display</h5>
            <iframe src="form.html" height="900"></iframe>
            <a class="btn shadow" href="form.html" target="_blank">view</a>
        </div>
        <div class="cont" id="fullscreen">
            <h3>fullscreen</h3>
            <h5>code</h5>
            <p>Add the class to the DOM</p>
<xmp>
class="fullscreen"
</xmp>
            <h5>effect display</h5>
            <iframe src="fullscreen.html"></iframe>
            <a class="btn shadow" href="fullscreen.html" target="_blank">view</a>
        </div>
        <div class="cont" id="hop">
            <h3>hop</h3>
            <h5>code</h5>
            <p>Add the class to the DOM, if you need align right or align bottom, add attribute <span>right</span> or <span>bottom</span> or <span>center</span> to <span>hop</span></p>
<xmp>
<hop>
    <a>link</a>
    <hop-cont>
        <a>link</a>
        <a>link</a>
        <a>link</a>
    </hop-cont>
</hop>
</xmp>
            <h5>effect display</h5>
            <iframe src="hop.html" height="350"></iframe>
            <a class="btn shadow" href="hop.html" target="_blank">view</a>
        </div>
        <div class="cont" id="horn">
            <h3>horn</h3>
            <h5>code</h5>
            <p>Add the class to the DOM, if you need align left, add attribute <span>left</span> to <span>horn</span></p>
<xmp>
<horn></horn>
</xmp>
            <h5>effect display</h5>
            <iframe src="horn.html" height="300"></iframe>
            <a class="btn shadow" href="horn.html" target="_blank">view</a>
        </div>
        <div class="cont" id="language">
            <h3>language</h3>
            <p>To use the language plug-in, you need to create <span>lang/</span> directory, create language json file in the directory, For example, English: <span>en.json</span></p>
            <h5>set language cookie</h5>
            <p>Add the attribute to the DOM, <span>json</span> is the json file name in the <span>lang/</span></p>
<xmp>
lang-set="json"
</xmp>
            <h5>get language cookie</h5>
            <p>Add the javascript to the DOM</p>
<xmp>
getCookie('lang')
</xmp>
            <h5>language mark</h5>
            <p>Add the attribute to the DOM, <span>lang-name</span> is the structure in json, <span>lang</span> to <span>html</span>, <span>lang-placeholder</span> to <span>placeholder</span>, <span>lang-value</span> to <span>value</span>, <span>lang-content</span> to <span>content</span></p>
<xmp>
lang="lang-name"
lang-placeholder="lang-name"
lang-value="lang-name"
lang-content="lang-name"
</xmp>
            <h5>effect display</h5>
            <iframe src="language.html" height="400"></iframe>
            <a class="btn shadow" href="language.html" target="_blank">view</a>
        </div>
        <div class="cont" id="menu">
            <h3>menu</h3>
            <h5>code</h5>
            <p>Add the code to the DOM</p>
<xmp>
<menu>
    <menu-cont>
        <li><a href="">one</a></li>
        <li><a>two</a>
            <menu-group>
                <a href="">one</a>
                <a href="">two</a>
                <a href="">three</a>
            </menu-group>
        </li>
        <li><a>three</a>
            <menu-group>
                <menu-list>
                    <h6>group</h6>
                    <a href="">one</a>
                    <a href="">two</a>
                    <a href="">three</a>
                </menu-list>
                <menu-list>
                    <h6>group</h6>
                    <a href="">one</a>
                    <a href="">two</a>
                    <a href="">three</a>
                </menu-list>
            </menu-group>
        </li>
    </menu-cont>
</menu>
</xmp>
            <h5>effect display</h5>
            <iframe src="menu.html" height="450"></iframe>
            <a class="btn shadow" href="menu.html" target="_blank">view</a>
        </div>
        <div class="cont" id="mix">
            <h3>mix</h3>
            <h5>code</h5>
            <p>Add the class to the DOM</p>
<xmp>
class="mix-abrazine"
class="mix-hue"
class="mix-multiply"
class="mix-screen"
class="mix-luminosity"
class="mix-difference"
class="mono"
class="mono-click"
</xmp>
            <h5>effect display</h5>
            <iframe src="mix.html" height="900"></iframe>
            <a class="btn shadow" href="mix.html" target="_blank">view</a>
        </div>
        <div class="cont" id="notice">
            <h3>notice</h3>
            <h5>code</h5>
            <p>Add the code to the DOM</p>
<xmp>
<notice href="/"><a href=""></a></notice>
</xmp>
            <h5>effect display</h5>
            <iframe src="notice.html" height="200"></iframe>
            <a class="btn shadow" href="notice.html" target="_blank">view</a>
        </div>


        <div class="cont" id="notify">
            <h3>notify</h3>
            <h5>code</h5>
            <p>Run <span>notify()</span></p>
<xmp>
notify('notify')
</xmp>
            <p>If you need align bottom, add second value</p>
<xmp>
notify('notify','bottom')
</xmp>
            <p>If you need auto close, add third value</p>
<xmp>
notify('notify','bottom','5000')
</xmp>
            <h5>effect display</h5>
            <iframe src="notify.html" height="300"></iframe>
            <a class="btn shadow" href="notify.html" target="_blank">view</a>
        </div>
        <div class="cont" id="page">
            <h3>page</h3>
            <h5>code</h5>
            <p>Add the code to the DOM</p>
<xmp>
<page>
    <a class="ico ico-alone-side-left"></a>
    <a class="ico ico-alone-left"></a>
    <a href="">1</a>
    <a href="">2</a>
    <a class="active" href="">3</a>
    <a href="">4</a>
    <a href="">5</a>
    <a class="ico ico-alone-right"></a><a class="ico ico-alone-side-right"></a>
    <span>1/10</span>
    <input type="text">
    <a class="ico ico-arrow-enter"></a>
</page>
</xmp>
            <h5>effect display</h5>
            <iframe src="page.html"></iframe>
            <a class="btn shadow" href="page.html" target="_blank">view</a>
        </div>
        <div class="cont" id="pop">
            <h3>pop</h3>
            <p>You can use the <span>pop</span> attribute to quickly bind buttons and pop</p>
            <h5>pop center code</h5>
            <p>Add the code to the DOM</p>
<xmp>
<pop>
    <pop-main>
        <pop-title><h3>title</h3><a class="close"></a></pop-title>
        <pop-cont>article</pop-cont>
        <pop-solve>
            <a href="" class="btn">previous</a>
            <a href="" class="btn">cancel</a>
            <button class="btn">submit</button>
            <a href="" class="btn">confirm</a>
        </pop-solve>
    </pop-main>
</pop>
</xmp>
            <h5>pop choice code</h5>
            <p>Add the code to the DOM</p>
<xmp>
<pop>
    <pop-choice>
        <pop-title><h3>title</h3><a class="close"></a></pop-title>
        <pop-cont>article</pop-cont>
        <pop-solve>
            <a href="" class="btn">previous</a>
            <a href="" class="btn">cancel</a>
            <button class="btn">submit</button>
            <a href="" class="btn">confirm</a>
        </pop-solve>
    </pop-choice>
</pop>
</xmp>
            <h5>pop sider code</h5>
            <p>Add the code to the DOM, if you need pop align right, add <span>right</span> attribute to <span>pop</span></p>
<xmp>
<pop>
    <pop-sider>
        <pop-title><h3>title</h3><a class="close"></a></pop-title>
        <pop-cont>article</pop-cont>
    </pop-sider>
</pop>
</xmp>
            <h5>effect display</h5>
            <iframe src="pop.html" height="300"></iframe>
            <a class="btn shadow" href="pop.html" target="_blank">view</a>
        </div>
        <div class="cont" id="random">
            <h3>random</h3>
            <p><span class="warning">Warning :</span> When the defined element is missing the default value, the remote value will be obtained automatically</p>
            <h5>code</h5>
            <p>Add the attribute to the DOM, When the element is <span>img</span> will be given <span>src</span> and <span></span> ,Other elements will be given <span>background-image</span></p>
<xmp>
uigg="img"
uigg="product"
uigg="bg"
uigg="avatar"
uigg="color"
</xmp>
            <p>If you need random text, add the attribute to the DOM</p>
<xmp>
uigg="title"
uigg="txt"
</xmp>
            <p>If you need emot, add the attribute to the DOM</p>
<xmp>
uigg="emot"
</xmp>
            <h5>effect display</h5>
            <iframe src="random.html" height="550"></iframe>
            <a class="btn shadow" href="random.html" target="_blank">view</a>
        </div>
        <div class="cont" id="rate">
            <h3>rate</h3>
            <h5>code</h5>
            <p>Add the code to the DOM, <span>value</span> is the default star</p>
<xmp>
<rate value=""></rate>
</xmp>
            <p>If you need edit it, add the <span>edit</span> attribute to the <span>rate</span></p>
<xmp>
edit
</xmp>
            <p>If you need other styles, you can add <span>heart</span> and <span>thumb</span> and <span>circular</span> to change the appearance of the <span>rate</span></p>
<xmp>
heart
thumb
circular
</xmp>
            <h5>effect display</h5>
            <iframe src="rate.html"></iframe>
            <a class="btn shadow" href="rate.html" target="_blank">view</a>
        </div>
        <div class="cont" id="recording">
            <h3>recording</h3>
            <h5>code</h5>
            <p>Add the class to the DOM</p>
<xmp>
class="recording"
</xmp>
            <h5>effect display</h5>
            <iframe src="recording.html"></iframe>
            <a class="btn shadow" href="recording.html" target="_blank">view</a>
        </div>
        <div class="cont" id="reminder">
            <h3>reminder</h3>
            <h5>code</h5>
            <p>Add the code to the DOM</p>
<xmp>
<reminder></reminder>
</xmp>
            <h5>effect display</h5>
            <iframe src="reminder.html" height="300"></iframe>
            <a class="btn shadow" href="reminder.html" target="_blank">view</a>
        </div>
        <div class="cont" id="scaler">
            <h3>scaler</h3>
            <h5>code</h5>
            <p>Add the code to the DOM, you can add the <span>step</span> or <span>min</span> or <span>max</span> attribute to the <span>input</span></p>
<xmp>
<scaler>
    <input value="1">
</scaler>
</xmp>
            <h5>effect display</h5>
            <iframe src="scaler.html"></iframe>
            <a class="btn shadow" href="scaler.html" target="_blank">view</a>
        </div>
        <div class="cont" id="smooth">
            <h3>smooth</h3>
            <h5>code</h5>
            <p>Add the code to the DOM</p>
<xmp>
<a class="smooth" href="#id"></a>
</xmp>
            <h5>effect display</h5>
            <iframe src="smooth.html" height="300"></iframe>
            <a class="btn shadow" href="smooth.html" target="_blank">view</a>
        </div>
        <div class="cont" id="step">
            <h3>step</h3>
            <h5>code</h5>
            <p>Add the code to the DOM</p>
<xmp>
<step>
    <li class="active">step 1</li>
    <li>step 2</li>
    <li>step 3</li>
</step>
</xmp>
            <p>If you need flex vertical arrangement, add the <span>column</span> attribute to the <span>step</span></p>
<xmp>
column
</xmp>
            <h5>effect display</h5>
            <iframe src="step.html" height="300"></iframe>
            <a class="btn shadow" href="step.html" target="_blank">view</a>
        </div>
        <div class="cont" id="tab">
            <h3>tab</h3>
            <h5>code</h5>
            <p>Add the code to the DOM</p>
<xmp>
<tab>
    <tab-list>
        <li class="active"><a>one</a></li>
        <li><a>two</a></li>
        <li><a>three</a></li>
    </tab-list>
    <tab-cont>
        <tab-group class="active">one</tab-group>
        <tab-group>two</tab-group>
        <tab-group>three</tab-group>
    </tab-cont>
</tab>
</xmp>
            <h5>effect display</h5>
            <iframe src="tab.html" height="300"></iframe>
            <a class="btn shadow" href="tab.html" target="_blank">view</a>
        </div>
        <div class="cont" id="table">
            <h3>table</h3>
            <h5>code</h5>
            <p>Add the code to the DOM</p>
<xmp>
<section class="table">
    <table>
        <thead>
            <tr>
                <th>classify</th>
                <td>classify</td>
                <td>classify</td>
                <td>classify</td>
            </tr>
        </thead>
        <tbody>
            <tr>
                <th>list</th>
                <td>content</td>
                <td>content</td>
                <td>content</td>
            </tr>
            <tr>
                <th>list</th>
                <td>content</td>
                <td>content</td>
                <td>content</td>
            </tr>
            <tr>
                <th>list</th>
                <td>content</td>
                <td>content</td>
                <td>content</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <th>list</th>
                <td>content</td>
                <td>content</td>
                <td>content</td>
            </tr>
        </tfoot>
    </table>
</section>
</xmp>
            <h5>effect display</h5>
            <iframe src="table.html" height="310"></iframe>
            <a class="btn shadow" href="table.html" target="_blank">view</a>
        </div>
        <div class="cont" id="tip">
            <h3>tip</h3>
            <h5>code</h5>
            <p>Run tip()</p>
<xmp>
tip('tip')
</xmp>
            <h5>effect display</h5>
            <iframe src="tip.html" height="200"></iframe>
            <a class="btn shadow" href="tip.html" target="_blank">view</a>
        </div>
        <div class="cont" id="title">
            <h3>title</h3>
            <h5>code 1</h5>
            <p>Add the code to the DOM</p>
<xmp>
<section class="title">
    <em>~</em>
    <h3>title</h3>
    <em>~</em>
</section>
</xmp>
            <h5>code 2</h5>
            <p>Add the code to the DOM</p>
<xmp>
<section class="title">
    <h3>title</h3>
    <span>subtitle</span>
</section>
</xmp>
            <h5>code 3</h5>
            <p>Add the code to the DOM</p>
<xmp>
<section class="title-flex">
    <h3>title</h3>
</section>
</xmp>
            <h5>effect display</h5>
            <iframe src="title.html" height="350"></iframe>
            <a class="btn shadow" href="title.html" target="_blank">view</a>
        </div>
        <div class="cont" id="toggle">
            <h3>toggle</h3>
            <h5>code</h5>
            <p>Add the code to the DOM</p>
<xmp>
<o class="radio"></o>
<o class="radio"></o>
<o class="radio-done"></o>
<o class="checkbox"></o>
<o class="checkbox-done"></o>
<o class="checkbox checkbox-all"></o>
<o class="checkbox-cancel"></o>
<o class="favorite"></o>
<o class="star"></o>
<o class="visibility"></o>
<o class="password"></o>
<o class="mic"></o>
<o class="volume"></o>
<o class="muzak"></o>
<o class="phonecard"></o>
<o class="telecamera"></o>
<o class="camera"></o>
<o class="aim"></o>
<o class="semaphore"></o>
<o class="suitcase"></o>
<o class="light"></o>
<o class="devicerotate"></o>
<o class="thumbtack"></o>
<o class="bell"></o>
<o class="place"></o>
<o class="link"></o>
<o class="blur"></o>
<o class="toggle"></o>
</xmp>
            <p>If you need effective association, add the class to the DOM</p>
<xmp>
class="parent"
</xmp>
            <h5>effect display</h5>
            <iframe src="toggle.html"></iframe>
            <a class="btn shadow" href="toggle.html" target="_blank">view</a>
        </div>
        <div class="cont" id="top">
            <h3>top</h3>
            <h5>code</h5>
            <p>Add the class to the DOM</p>
<xmp>
class="top"
</xmp>
            <p>If you need a separate button, add the class to the DOM</p>
<xmp>
class="top btn"
</xmp>
            <h5>effect display</h5>
            <iframe src="top.html"></iframe>
            <a class="btn shadow" href="top.html" target="_blank">view</a>
        </div>
        <div class="cont" id="touch">
            <h3>touch</h3>
            <h5>code</h5>
            <p>Add the javascript to the DOM</p>
<xmp>
$('').touch('up',function(){})
$('').touch('down',function(){})
$('').touch('left',function(){})
$('').touch('right',function(){})
$('').touch('all',function(){})
</xmp>
            <h5>effect display</h5>
            <iframe src="touch.html" height="400"></iframe>
            <a class="btn shadow" href="touch.html" target="_blank">view</a>
        </div>
        <h2><i class="ico ico-phone-ios"></i>Mobile terminal</h2>
        <div class="cont" id="name">
            <h3>name</h3>
            <h5>name code</h5>
            <p>Add the code to the DOM</p>
<xmp>
<name>
    <a class="ico ico-return-left return"></a>
    <h2>name</h2>
    <a href="" class="ico ico-menu"></a>
</name>
</xmp>
            <h5>left name code</h5>
            <p>Add the code to the DOM</p>
<xmp>
<name>
    <a class="ico ico-return-left return"></a>
    <h3>name</h3>
    <a href="" class="ico ico-menu"></a>
</name>
</xmp>
            <h5>logo name code</h5>
            <p>Add the code to the DOM</p>
<xmp>
<name>
    <a class="ico ico-return-left return"></a>
    <name-logo><img src="../images/ico.svg"><h1>UIGG</h1></name-logo>
    <a href="" class="ico ico-menu"></a>
</name>
</xmp>
            <h5>search name code</h5>
            <p>Add the code to the DOM</p>
<xmp>
<name>
    <a class="ico ico-return-left return"></a>
    <name-search><input type="text" placeholder="Search"></name-search>
    <a href="" class="ico ico-menu"></a>
</name>
</xmp>
            <h5>effect display</h5>
            <iframe src="name.html" height="400"></iframe>
            <a class="btn shadow" href="name.html" target="_blank">view</a>
        </div>
        <div class="cont" id="nav">
            <h3>nav</h3>
            <h5>code</h5>
            <p>Add the code to the DOM</p>
<xmp>
<nav>
    <li><a href=""><i class="ico ico-home"></i><span>home</span></a></li>
    <li><a href=""><i class="ico ico-app"></i><span>apps</span></a></li>
    <li><a href=""><i class="ico ico-shoppingcart"></i><span>shop</span></a></li>
    <li><a href=""><i class="ico ico-user"></i><span>user</span></a></li>
</nav>
</xmp>
            <p>If you need the uigg style, add the <span>uigg</span> attribute to the <span>nav</span> and specify the background color <span>uigg="#ccc"</span></p>
<xmp>
uigg="#ccc"
</xmp>
            <h5>effect display</h5>
            <iframe src="nav.html" height="300"></iframe>
            <a class="btn shadow" href="nav.html" target="_blank">view</a>
        </div>
        <div class="cont" id="music">
            <h3>muzak</h3>
            <h5>code</h5>
            <p>Add the code to the DOM</p>
<xmp>
<music>
    <audio src="../"></audio>
</music>
</xmp>
            <p>If you need pause by default, add the <span>pause</span> attribute to the <span>music</span></p>
<xmp>
pause
</xmp>
            <h5>effect display</h5>
            <iframe src="music.html" height="150"></iframe>
            <a class="btn shadow" href="music.html" target="_blank">view</a>
        </div>
        <h2><i class="ico ico-usb"></i>Internal components</h2>
        <div class="cont" id="admin">
            <h3>admin (Preview)</h3>
            <h5>admin general template</h5>
            <p>We provide a common function management interface</p>
            <a class="btn shadow" href="../admin/login.html" target="_blank">login</a>
            <a class="btn shadow" href="../admin/index.html" target="_blank">admin</a>
        </div>
        <div class="cont" id="chat">
            <h3>chat (Preview)</h3>
            <h5>chat general template</h5>
            <p>We provide a common function management interface</p>
            <a class="btn shadow" href="chat.html" target="_blank">view</a>
        </div>
        <h2><i class="ico ico-response"></i>External components</h2>
        <div class="cont" id="swiper">
            <h3>swiper</h3>
            <p>You can go to swiper to see more parameters. UIGG only provides a few common models</p>
            <a class="btn shadow" href="//swiperjs.com/swiper-api" target="_blank">Swiper API</a>
            <h5>about loop</h5>
            <p><span class="warning">Warning :</span> Amount of slides in loop mode should be at least 2x of <span>slidesPerView</span> value</p>
            <h5>code</h5>
            <p>Add the style and javascript to the <span>head</span></p>
<xmp>
<link rel="stylesheet" href="//ui.gg/lib/swiper-bundle.min.css">
<script src="//ui.gg/lib/swiper-bundle.min.js"></script>
</xmp>
            <p>CDN</p>
<xmp>
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/swiper/swiper-bundle.min.css">
<script src="//cdn.jsdelivr.net/npm/swiper/swiper-bundle.min.js"></script>
</xmp>
            <h5>swiper banner code</h5>
            <p>Add the code to the DOM</p>
<xmp>
<section class="swiper swiper-banner">
    <div class="swiper-wrapper">
        <div class="swiper-slide"></div>
        <div class="swiper-slide"></div>
        <div class="swiper-slide"></div>
    </div>
    <div class="swiper-pagination"></div>
    <div class="swiper-button-next"></div>
    <div class="swiper-button-prev"></div>
    <script>
        var swiper = new Swiper('.swiper-banner',{
            spaceBetween: 10,
            loop: true,
            keyboard: {enabled: true},
            autoplay: {
                delay: 5000,
                disableOnInteraction: false,
            },
            pagination: {
                el: '.swiper-pagination',
                clickable: true,
                dynamicBullets: true,
            },
            navigation: {
                nextEl: '.swiper-button-next',
                prevEl: '.swiper-button-prev',
            },
        })
    </script>
</section>
</xmp>
            <h5>swiper list code</h5>
            <p>Add the code to the DOM</p>
<xmp>
<section class="swiper swiper-list">
    <div class="swiper-wrapper">
        <div class="swiper-slide"></div>
        <div class="swiper-slide"></div>
        <div class="swiper-slide"></div>
        <div class="swiper-slide"></div>
        <div class="swiper-slide"></div>
        <div class="swiper-slide"></div>
    </div>
    <div class="swiper-pagination"></div>
    <div class="swiper-button-next"></div>
    <div class="swiper-button-prev"></div>
    <script>
        var swiper = new Swiper('.swiper-list',{
            slidesPerView: 3,
            //slidesPerGroup: 3
            loop: true,
            pagination: {
                el: '.swiper-pagination',
                clickable: true,
            },
            navigation: {
                nextEl: '.swiper-button-next',
                prevEl: '.swiper-button-prev',
            },
            breakpoints: {
                320: {
                    slidesPerView: 1,
                    spaceBetween: 10
                },
                720: {
                    slidesPerView: 2,
                    spaceBetween: 15
                },
                960: {
                    slidesPerView: 3,
                    spaceBetween: 20
                },
            },
        })
    </script>
</section>
</xmp>
            <h5>swiper vertical code</h5>
            <p>Add the code to the DOM</p>
<xmp>
<section class="swiper swiper-vertical">
    <div class="swiper-wrapper">
        <div class="swiper-slide"></div>
        <div class="swiper-slide"></div>
        <div class="swiper-slide"></div>
    </div>
    <div class="swiper-pagination"></div>
    <script>
        var swiper = new Swiper('.swiper-vertical',{
            direction: 'vertical',
            slidesPerView: 1,
            spaceBetween: 10,
            mousewheel: true,
            keyboard: {enabled: true},
            pagination: {
                el: '.swiper-pagination',
                clickable: true,
            },
        })
    </script>
</section>
</xmp>
            <h5>swiper gallery code</h5>
            <p>Add the code to the DOM</p>
<xmp>
<section class="swiper-gallery">
    <div class="swiper gallery-top">
        <div class="swiper-wrapper">
            <div class="swiper-slide"></div>
            <div class="swiper-slide"></div>
            <div class="swiper-slide"></div>
            <div class="swiper-slide"></div>
            <div class="swiper-slide"></div>
            <div class="swiper-slide"></div>
            <div class="swiper-slide"></div>
            <div class="swiper-slide"></div>
        </div>
        <div class="swiper-button-next"></div>
        <div class="swiper-button-prev"></div>
    </div>
    <div class="swiper gallery-thumb">
        <div class="swiper-wrapper">
            <div class="swiper-slide"></div>
            <div class="swiper-slide"></div>
            <div class="swiper-slide"></div>
            <div class="swiper-slide"></div>
            <div class="swiper-slide"></div>
            <div class="swiper-slide"></div>
            <div class="swiper-slide"></div>
            <div class="swiper-slide"></div>
        </div>
    </div>
    <script>
        var galleryThumbs = new Swiper('.gallery-thumb',{
            spaceBetween: 10,
            slidesPerView: 4,
            loop: true,
            freeMode: true,
            watchSlidesProgress: true,
        })
        var galleryTop = new Swiper('.gallery-top', {
            spaceBetween: 10,
            loop:true,
            navigation: {
                nextEl: '.swiper-button-next',
                prevEl: '.swiper-button-prev',
            },
            thumbs: {swiper: galleryThumbs},
        })
    </script>
</section>
</xmp>
            <h5>swiper animate code</h5>
            <p>Add the code to the DOM</p>
<xmp>
<section class="swiper swiper-animate">
    <div class="swiper-wrapper">
        <div class="swiper-slide"><div class="swiper-anime anime-fade-in"></div></div>
        <div class="swiper-slide"><div class="swiper-anime anime-fade-in"></div></div>
        <div class="swiper-slide"><div class="swiper-anime anime-fade-in"></div></div>
    </div>
    <div class="swiper-pagination"></div>
    <div class="swiper-button-next"></div>
    <div class="swiper-button-prev"></div>
    <script>
        var swiper = new Swiper('.swiper-animate',{
            pagination: {
                el: '.swiper-pagination',
                clickable: true,
            },
            navigation: {
                nextEl: '.swiper-button-next',
                prevEl: '.swiper-button-prev',
            },
        })
    </script>
</section>
</xmp>
            <h5>swiper lug code</h5>
            <p>Add the code to the DOM</p>
<xmp>
<section class="swiper-lug">
    <div class="lug-thumbs">
        <a id="lug-1" class="active"></a>
        <a id="lug-2"></a>
        <a id="lug-3"></a>
    </div>
    <div class="swiper lug-top">
        <div class="swiper-wrapper">
            <div class="swiper-slide"></div>
            <div class="swiper-slide"></div>
            <div class="swiper-slide"></div>
        </div>
    </div>
    <script>
        var swiperLug = new Swiper('.lug-top',{
            //effect : 'fade',
        })
        $('#lug-1').click(function(){swiperLug.slideToLoop(0, 1000, false)})
        $('#lug-2').click(function(){swiperLug.slideToLoop(1, 1000, false)})
        $('#lug-3').click(function(){swiperLug.slideToLoop(2, 1000, false)})
        lug()
    </script>
</section>
</xmp>
            <h5>swiper hash code</h5>
            <p>Add the code to the DOM</p>
<xmp>
<section class="swiper swiper-hash">
    <div class="swiper-wrapper">
        <div data-hash="one" class="swiper-slide">one</div>
        <div data-hash="two" class="swiper-slide">two</div>
        <div data-hash="three" class="swiper-slide">three</div>
    </div>
    <div class="swiper-button-next"></div>
    <div class="swiper-button-prev"></div>
    <div class="swiper-pagination"></div>
    <script>
        var swiper = new Swiper(".swiper-hash",{
            spaceBetween: 30,
            hashNavigation: {watchState: true},
            pagination: {
                el: ".swiper-pagination",
                clickable: true,
            },
            navigation: {
                nextEl: ".swiper-button-next",
                prevEl: ".swiper-button-prev",
            },
        })
    </script>
</section>
</xmp>
            <h5>swiper scrollbar code</h5>
            <p>Add the code to the DOM</p>
<xmp>
<section class="swiper swiper-scroll">
    <div class="swiper-wrapper">
        <div class="swiper-slide"></div>
        <div class="swiper-slide"></div>
        <div class="swiper-slide"></div>
    </div>
    <div class="swiper-scrollbar"></div>
    <script>
        var swiper = new Swiper('.swiper-scroll',{
            scrollbar: {
                el: '.swiper-scrollbar',
                hide: true,
            },
        })
    </script>
</section>
</xmp>
            <h5>swiper coverflow code</h5>
            <p>Add the code to the DOM</p>
<xmp>
<section class="swiper swiper-coverflow">
    <div class="swiper-wrapper">
        <div class="swiper-slide"></div>
        <div class="swiper-slide"></div>
        <div class="swiper-slide"></div>
    </div>
    <div class="swiper-pagination"></div>
    <script>
        var swiper = new Swiper('.swiper-coverflow',{
            effect: 'coverflow',
            grabCursor: true,
            centeredSlides: true,
            slidesPerView: 'auto',
            coverflowEffect: {
                rotate: 50,
                stretch: 0,
                depth: 100,
                modifier: 1,
                slideShadows: true,
            },
            pagination: {el: '.swiper-pagination'},
        })
    </script>
</section>
</xmp>
            <h5>swiper parallax code</h5>
            <p>Add the code to the DOM</p>
<xmp>
<section class="swiper swiper-parallax">
    <div class="parallax-bg" style="background-image: url()" data-swiper-parallax="-23%"></div>
    <div class="swiper-wrapper">
        <div class="swiper-slide">
            <h3 data-swiper-parallax="-300"><span data-swiper-parallax="100"></span></h3>
        </div>
        <div class="swiper-slide">
            <h3 data-swiper-parallax="-300"><span data-swiper-parallax="100"></span></h3>
        </div>
        <div class="swiper-slide">
            <h3 data-swiper-parallax="-300"><span data-swiper-parallax="100"></span></h3>
        </div>
    </div>
    <script>
        var swiper = new Swiper('.swiper-parallax',{
            speed: 600,
            parallax: true,
        })
    </script>
</section>
</xmp>
            <h5>effect display</h5>
            <iframe src="swiper.html" height="600"></iframe>
            <a class="btn shadow" href="swiper.html" target="_blank">view</a>
        </div>
        <div class="cont" id="editor">
            <h3>editor</h3>
            <p>You can go to tiny to see more parameters. UIGG only provides a few common models</p>
            <a class="btn shadow" href="//www.tiny.cloud/docs/tinymce/6/" target="_blank">tiny API</a>
            <h5>code</h5>
            <p>Add the javascript to the <span>head</span></p>
<xmp>
<script src="//ui.gg/lib/editor/editor.js"></script>
</xmp>
            <p>CDN</p>
<xmp>
<script src="//cdn.jsdelivr.net/npm/uigg/editor/editor.min.js"></script>
</xmp>
            <p>Select different editors according to requirements,Add the class to the DOM</p>
<xmp>
class="editor"
class="editor-simple"
class="editor-upload"
class="editor-all"
</xmp>
            <h5>PHP upload</h5>
            <p>If you need upload image, you must download <a href="//ui.gg/lib/editor/upload.zip">upload.zip</a> to to your website directory and configure php</p>
            <a class="btn shadow" href="//ui.gg/lib/editor/upload.zip" target="_blank">download</a>
            <h5>effect display</h5>
            <iframe src="editor.html" height="500"></iframe>
            <a class="btn shadow" href="editor.html" target="_blank">view</a>
        </div>
        <h2><i class="ico ico-app"></i>General library</h2>
        <div class="cont" id="color">
            <h3>color</h3>
            <h5>CSS functions</h5>
            <p>UIGG preset some common color functions</p>
            <div class="table">
                <table>
                    <thead>
                        <tr>
                            <th>type</th>
                            <td>effect</td>
                            <td>function</td>
                            <td>color</td>
                            <td>background</td>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <th rowspan="0">purity</th>
                            <td class="bg-fff"></td>
                            <td>var(--fff)</td>
                            <td>co-fff</td>
                            <td>bg-fff</td>

                        </tr>
                        <tr><td class="bg-f7"></td><td>var(--f7)</td><td>co-f7</td><td>bg-f7</td></tr>
                        <tr><td class="bg-eee"></td><td>var(--eee)</td><td>co-eee</td><td>bg-eee</td></tr>
                        <tr><td class="bg-ddd"></td><td>var(--ddd)</td><td>co-ddd</td><td>bg-ddd</td></tr>
                        <tr><td class="bg-ccc"></td><td>var(--ccc)</td><td>co-ccc</td><td>bg-ccc</td></tr>
                        <tr><td class="bg-bbb"></td><td>var(--bbb)</td><td>co-bbb</td><td>bg-bbb</td></tr>
                        <tr><td class="bg-999"></td><td>var(--999)</td><td>co-999</td><td>bg-999</td></tr>
                        <tr><td class="bg-666"></td><td>var(--666)</td><td>co-666</td><td>bg-666</td></tr>
                        <tr><td class="bg-333"></td><td>var(--333)</td><td>co-333</td><td>bg-333</td></tr>
                        <tr><td class="bg-222"></td><td>var(--222)</td><td>co-222</td><td>bg-222</td></tr>
                        <tr><td class="bg-111"></td><td>var(--111)</td><td>co-111</td><td>bg-111</td></tr>
                        <tr><td class="bg-000"></td><td>var(--000)</td><td>co-000</td><td>bg-000</td></tr>
                    </tbody>
                    <tbody>
                        <tr>
                            <th rowspan="0">color</th>
                            <td class="bg-brown"></td>
                            <td>var(--brown)</td>
                            <td>co-brown</td>
                            <td>bg-brown</td>

                        </tr>
                        <tr><td class="bg-red"></td><td>var(--red)</td><td>co-red</td><td>bg-red</td></tr>
                        <tr><td class="bg-pink"></td><td>var(--pink)</td><td>co-pink</td><td>bg-pink</td></tr>
                        <tr><td class="bg-purple"></td><td>var(--purple)</td><td>co-purple</td><td>bg-purple</td></tr>
                        <tr><td class="bg-sapphire"></td><td>var(--sapphire)</td><td>co-sapphire</td><td>bg-sapphire</td></tr>
                        <tr><td class="bg-blue"></td><td>var(--blue)</td><td>co-blue</td><td>bg-blue</td></tr>
                        <tr><td class="bg-cyan"></td><td>var(--cyan)</td><td>co-cyan</td><td>bg-cyan</td></tr>
                        <tr><td class="bg-green"></td><td>var(--green)</td><td>co-green</td><td>bg-green</td></tr>
                        <tr><td class="bg-lime"></td><td>var(--lime)</td><td>co-lime</td><td>bg-lime</td></tr>
                        <tr><td class="bg-yellow"></td><td>var(--yellow)</td><td>co-yellow</td><td>bg-yellow</td></tr>
                        <tr><td class="bg-orange"></td><td>var(--orange)</td><td>co-orange</td><td>bg-orange</td></tr>
                        <tr><td class="bg-tomato"></td><td>var(--tomato)</td><td>co-tomato</td><td>bg-tomato</td></tr>
                        <tr><td class="bg-wheel"></td><td></td><td></td><td>bg-wheel</td></tr>
                    </tbody>
                    <thead>
                        <tr>
                            <th>type</th>
                            <td>effect</td>
                            <td>function</td>
                            <td>effect</td>
                            <td>function</td>
                        </tr>
                    </thead>
                    <tbody>
                        <tr><th rowspan="0">transparent</th>
                            <td style="background: var(--000-1)"></td><td>var(--000-1)</td>
                            <td style="background: var(--000-9)"></td><td>var(--fff-1)</td>
                        </tr>
                        <tr>
                            <td style="background: var(--000-2)"></td><td>var(--000-2)</td>
                            <td style="background: var(--000-8)"></td><td>var(--fff-2)</td>
                        </tr>
                        <tr>
                            <td style="background: var(--000-3)"></td><td>var(--000-3)</td>
                            <td style="background: var(--000-7)"></td><td>var(--fff-3)</td>
                        </tr>
                        <tr>
                            <td style="background: var(--000-4)"></td><td>var(--000-4)</td>
                            <td style="background: var(--000-6)"></td><td>var(--fff-4)</td>
                        </tr>
                        <tr>
                            <td style="background: var(--000-5)"></td><td>var(--000-5)</td>
                            <td style="background: var(--000-5)"></td><td>var(--fff-5)</td>
                        </tr>
                        <tr>
                            <td style="background: var(--000-6)"></td><td>var(--000-6)</td>
                            <td style="background: var(--000-4)"></td><td>var(--fff-6)</td>
                        </tr>
                        <tr>
                            <td style="background: var(--000-7)"></td><td>var(--000-7)</td>
                            <td style="background: var(--000-3)"></td><td>var(--fff-7)</td>
                        </tr>
                        <tr>
                            <td style="background: var(--000-8)"></td><td>var(--000-8)</td>
                            <td style="background: var(--000-2)"></td><td>var(--fff-8)</td>
                        </tr>
                        <tr>
                            <td style="background: var(--000-9)"></td><td>var(--000-9)</td>
                            <td style="background: var(--000-1)"></td><td>var(--fff-9)</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
        <div class="cont" id="ico">
            <h3>ico</h3>
            <h5>UIGG iconfont</h5>
            <p>UIGG iconfont is a library free licensed font families and api for conveniently using the fonts via iconfont, img, unicode, symbol and css. We also provide delightful, beautifully crafted icons for common actions and items. Download them for use in your digital products for Android, iOS, and web</p>
            <a class="btn shadow" href="/ico.php" target="_blank">view</a>
            <a class="btn shadow" href="/lib/ico/ico.zip" target="_blank">download</a>
        </div>
        <div class="cont" id="attribute">
            <h3>attribute</h3>
            <h5>independent attribute</h5>
            <p>Common available attributes in UIGG</p>
            <div class="table">
                <table>
                    <thead>
                        <tr><td>attribute</td><td>definition</td></tr>
                    </thead>
                    <tbody>
                        <tr><td><xmp>uigg</xmp></td><td>Exclusive function call of uigg framework</td></tr>
                        <tr><td><xmp>edit</xmp></td><td>Make components editable</td></tr>
                        <tr><td><xmp>value</xmp></td><td>Sets the current value of the component</td></tr>
                        <tr><td><xmp>max</xmp></td><td>Set the maximum value of the component</td></tr>
                        <tr><td><xmp>min</xmp></td><td>Set the minimum value of the component</td></tr>
                        <tr><td><xmp>step</xmp></td><td>Set the step value of the component</td></tr>
                        <tr><td><xmp>pause</xmp></td><td>Set media pause</td></tr>
                        <tr><td><xmp>play</xmp></td><td>Set media play</td></tr>
                        <tr><td><xmp>column</xmp></td><td>Flex vertical arrangement</td></tr>
                        <tr><td><xmp>disabled</xmp></td><td>Set component disable</td></tr>
                        <tr><td><xmp>selected</xmp></td><td>Disable selection</td></tr>
                        <tr><td><xmp>cover</xmp></td><td>Object cover fills container</td></tr>
                        <tr><td><xmp>contain</xmp></td><td>Object contain fills container</td></tr>
                        <tr><td><xmp>center</xmp></td><td>Set object centered content</td></tr>
                        <tr><td><xmp>left</xmp></td><td>Set object left alignment</td></tr>
                        <tr><td><xmp>right</xmp></td><td>Set object right alignment</td></tr>
                        <tr><td><xmp>top</xmp></td><td>Set object top alignment</td></tr>
                        <tr><td><xmp>bottom</xmp></td><td>Set object bottom alignment</td></tr>
                        <tr><td><xmp>show</xmp></td><td>Force display object</td></tr>
                        <tr><td><xmp>hide</xmp></td><td>Force hidden objects</td></tr>
                        <tr><td><xmp>copy-val</xmp></td><td>Copy trigger value</td></tr>
                        <tr><td><xmp>copy-btn</xmp></td><td>Copy trigger button</td></tr>
                        <tr><td><xmp>lang</xmp></td><td>Paragraph translation</td></tr>
                        <tr><td><xmp>lang-set</xmp></td><td>Language cookie settings</td></tr>
                        <tr><td><xmp>lang-placeholder</xmp></td><td>Placeholder translation</td></tr>
                        <tr><td><xmp>lang-value</xmp></td><td>Value translation</td></tr>
                        <tr><td><xmp>lang-content</xmp></td><td>Content translation</td></tr>
                        <tr><td><xmp>color</xmp></td><td>Define element color</td></tr>
                        <tr><td><xmp>thumb</xmp></td><td>Appearance of rate</td></tr>
                        <tr><td><xmp>circular</xmp></td><td>Appearance of rate</td></tr>
                        <tr><td><xmp>title</xmp></td><td>The title will be escaped as "clue"</td></tr>
                    </tbody>
                </table>
            </div>
        </div>
        <div class="cont" id="label">
            <h3>label</h3>
            <h5>label quick reference</h5>
            <p>UIGG exclusive label definition</p>
            <div class="table">
                <table>
                    <thead>
                        <tr><td>label</td><td>definition</td></tr>
                    </thead>
                    <tbody>
                        <tr><td><xmp><u></u></xmp></td><td>Second tag, inheriting the underline of HTML, At the same time, it can serve as a support for an flex box</td></tr>
                        <tr><td><xmp><s></s></xmp></td><td>Third tag, inheriting the underline of HTML, seconds in time component</td></tr>
                        <tr><td><xmp><i></i></xmp></td><td>Icon definition</td></tr>
                        <tr><td><xmp><x></x></xmp></td><td>Close button and close layer</td></tr>
                        <tr><td><xmp><z></z></xmp></td><td>Lonely element</td></tr>
                        <tr><td><xmp><o></o></xmp></td><td>Global toggle element</td></tr>
                        <tr><td><xmp><m></m></xmp></td><td>Minute in time component</td></tr>
                        <tr><td><xmp><d></d></xmp></td><td>Day in time component</td></tr>
                        <tr><td><xmp><h></h></xmp></td><td>Hour in time component</td></tr>
                        <tr><td><xmp><y></y></xmp></td><td>Year in time component</td></tr>
                        <tr><td><xmp><cite></cite></xmp></td><td>Prompt text</td></tr>
                    </tbody>
                </table>
            </div>
        </div>
        <div class="cont" id="lib">
            <h3>lib</h3>
            <h5>emot</h5>
            <p>Library related connections, from <span>1.svg</span> to <span>100.svg</span></p>
<xmp>
//ui.gg/lib/emot/1.svg
</xmp>
            <p>CDN</p>
<xmp>
//cdn.jsdelivr.net/npm/uigg/emot/1.svg
</xmp>
            <h5>font</h5>
            <p>Library related connections</p>
<xmp>
//ui.gg/lib/font/font.css
</xmp>
            <p>CDN</p>
<xmp>
//cdn.jsdelivr.net/npm/uigg/font/font.min.css
</xmp>
            <h5>ico</h5>
            <p>Library related connections</p>
<xmp>
//ui.gg/lib/ico/ico.css
//ui.gg/lib/ico/ico.js
//ui.gg/lib/ico/ico.json
//ui.gg/lib/ico/ico.woff2
</xmp>
            <p>CDN</p>
<xmp>
//cdn.jsdelivr.net/npm/uigg/ico/ico.min.css
//cdn.jsdelivr.net/npm/uigg/ico/ico.min.js
//cdn.jsdelivr.net/npm/uigg/ico/ico.json
//cdn.jsdelivr.net/npm/uigg/ico/ico.woff2
</xmp>
            <p>Library related connections, category name and icon name, for example:</p>
<xmp>
//ui.gg/lib/ico/svg/brand/uigg.svg
</xmp>
            <p>CDN</p>
<xmp>
//cdn.jsdelivr.net/npm/uigg/ico/svg/brand/uigg.svg
</xmp>
            <h5>editor</h5>
            <p>Library related connections</p>
<xmp>
//ui.gg/lib/editor/editor.js
//ui.gg/lib/editor/upload.zip
</xmp>
            <p>CDN</p>
<xmp>
//cdn.jsdelivr.net/npm/uigg/editor/editor.min.js
//cdn.jsdelivr.net/npm/uigg/editor/upload.zip
</xmp>
            <h5>jquery</h5>
            <p>Library related connections</p>
<xmp>
//ui.gg/lib/jquery.min.js
</xmp>
            <p>CDN</p>
<xmp>
//cdn.jsdelivr.net/npm/jquery
</xmp>
            <h5>animejs</h5>
            <p>Library related connections</p>
<xmp>
//ui.gg/lib/anime.min.js
</xmp>
            <p>CDN</p>
<xmp>
//cdn.jsdelivr.net/npm/animejs
</xmp>
            <h5>swiper</h5>
            <p>Library related connections</p>
<xmp>
//ui.gg/lib/swiper-bundle.min.css
//ui.gg/lib/swiper-bundle.min.js
</xmp>
            <p>CDN</p>
<xmp>
//cdn.jsdelivr.net/npm/swiper/swiper-bundle.min.css
//cdn.jsdelivr.net/npm/swiper/swiper-bundle.min.js
</xmp>
            <h5>media</h5>
            <p>Library related connections</p>
<xmp>
//ui.gg/lib/media/aeolian.mp3
//ui.gg/lib/media/audio.mp3
//ui.gg/lib/media/bounce.mp3
//ui.gg/lib/media/boxing.mp3
//ui.gg/lib/media/brilliant.mp3
//ui.gg/lib/media/button.mp3
//ui.gg/lib/media/ding.mp3
//ui.gg/lib/media/drip.mp3
//ui.gg/lib/media/drum.mp3
//ui.gg/lib/media/dulcimer.mp3
//ui.gg/lib/media/error.mp3
//ui.gg/lib/media/notify.mp3
//ui.gg/lib/media/right.mp3
//ui.gg/lib/media/wave.mp3
//ui.gg/lib/media/video.mp4
//ui.gg/lib/media/loop.mp4
</xmp>
            <p>CDN</p>
<xmp>
//cdn.jsdelivr.net/npm/uigg/media/aeolian.mp3
//cdn.jsdelivr.net/npm/uigg/media/audio.mp3
//cdn.jsdelivr.net/npm/uigg/media/bounce.mp3
//cdn.jsdelivr.net/npm/uigg/media/boxing.mp3
//cdn.jsdelivr.net/npm/uigg/media/brilliant.mp3
//cdn.jsdelivr.net/npm/uigg/media/button.mp3
//cdn.jsdelivr.net/npm/uigg/media/ding.mp3
//cdn.jsdelivr.net/npm/uigg/media/drip.mp3
//cdn.jsdelivr.net/npm/uigg/media/drum.mp3
//cdn.jsdelivr.net/npm/uigg/media/dulcimer.mp3
//cdn.jsdelivr.net/npm/uigg/media/error.mp3
//cdn.jsdelivr.net/npm/uigg/media/notify.mp3
//cdn.jsdelivr.net/npm/uigg/media/right.mp3
//cdn.jsdelivr.net/npm/uigg/media/wave.mp3
//cdn.jsdelivr.net/npm/uigg/media/video.mp4
//cdn.jsdelivr.net/npm/uigg/media/loop.mp4
</xmp>
            <h5>images</h5>
            <p>Library related connections</p>
<xmp>
//ui.gg/lib/images/avatar/
//ui.gg/lib/images/bg/
//ui.gg/lib/images/color/
//ui.gg/lib/images/img/
//ui.gg/lib/images/product/
</xmp>
            <h5>qrcode</h5>
            <p>Library related connections</p>
<xmp>
//ui.gg/lib/qr/mixice.com.svg
//ui.gg/lib/qr/mssay.com.svg
//ui.gg/lib/qr/ui.gg.svg
//ui.gg/lib/qr/wechat.svg
//ui.gg/lib/qr/wechat-mssay.svg
</xmp>
        </div>
    </section>
</section>

<!----------------------------------------------------------------------------------------->

</body>
</html>